<template>
  <el-dialog :visible="isShow" title="添加角色" width="35%" @close="onclose">
    <el-form ref="roleFormRef" label-width="60px" :model="roleForm" :rules="roleRules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="roleForm.name" placeholder="请输入角色名称" size="small" />

      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="roleForm.description" placeholder="请输入角色描述" size="small" type="textarea" rows="3" />

      </el-form-item>
      <el-form-item label="状态">
        <div class="custom-switch">
          <el-switch
            v-model="roleForm.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :inactive-value="0"
            :active-value="1"
          />
          <span class="text">
            {{ Boolean(roleForm.state)? '已启用':'未启用' }}
          </span></div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button size="mini" type="primary" @click="submit">确定</el-button>
        <el-button size="mini" type="info" @click="onclose">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addRole } from '@/api/role'
export default {

  name: 'RoleDialog',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: true,
      roleForm: {
        name: '',
        description: '',
        state: 0
      },
      roleRules: {
        name: [{
          required: true,
          message: '角色名称不能为空',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '角色描述不能为空',
          trigger: 'blur'
        }]
      }

    }
  },
  methods: {
    onclose() {
      this.$refs.roleFormRef.resetFields()
      this.$emit('update:is-show', false)
    },
    async submit() {
      try {
        await this.$refs.roleFormRef.validate()
        await addRole(this.roleForm)
        this.onclose()
        this.$emit('update-list')
        this.$notify({
          message: '添加角色成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}

</script>

<style scoped lang="scss">
.custom-switch {
    display: flex;
    align-items: center;
    .text {
        margin-left: 5px;
    }
}
</style>
